import Draggable from 'react-draggable';
import './less/home.css'
import { useState } from 'react'
  export default function Home(){
      const [title,settitle] = useState([])
      const [val,setval] = useState([])
  // 点击按钮显示输入框
  const addbtn = ()=>{
    let arr = [...title,'']
    settitle(arr)
  }
  const change =(e)=>{
    // setTimeout(()=>{
      // setval(...val,e.target.value)
    // },2000)
  }
  // 输入框事件，点击回车push进数组中
  return (
    <div className='poot'>
    <div className="home">
      <div className="title">
        <span>Prepate to study</span>
      </div>
  <div className="main">

      <div style={{marginTop:'10px', clear: 'both' }}>
        {
          title.map((item,index)=>(
            <Draggable key={index}>
              <input type="text" value={val[index+1]} onChange={change} />
            </Draggable>
          ))
        }
  
      </div>
          <button className='btn' onClick={addbtn}>+</button>
      </div>
  </div>

  <div className="learning">
      <div className="title">
        <span>Learning...</span>
      </div>
      <div className="main">
    
      </div>
  </div>

  <div className="complete">
      <div className="title">
        <span>Complete</span>
      </div>
      <div className="main">
     
      </div>
  </div>
  </div>
  )
  }







// import { memo } from 'react'
// import { Box } from './box.jsx'
// import { Dustbin } from './Dustbin.jsx'
// import './less/home.css'
// export const Container = memo(function Container() {
//   return (


//     <div className='poot'>
//     <div className="home">
//       <div className="title">
//         <span>Prepate to study</span>
//       </div>
//       <div className="main">

//       <div style={{ overflow: 'hidden', clear: 'both' }}>
//         <Box name="Glass" />
//         <Box name="Banana" />
//         <Box name="Paper" />
//       </div>

//           <button className='btn'>+</button>
//       </div>
//   </div>

//   <div className="learning">
//       <div className="title">
//         <span>Learning...</span>
//       </div>
//       <div className="main">
//       <div style={{ overflow: 'hidden', clear: 'both' }}>
//         <Dustbin />
//       </div>
//       </div>
//   </div>

//   <div className="complete">
//       <div className="title">
//         <span>Complete</span>
//       </div>
//       <div className="main">
//       <div style={{ overflow: 'hidden', clear: 'both' }}>
//         <Dustbin />
//       </div>
//       </div>
//   </div>
//   </div>
//   )
// })